<template>
    <el-dialog
            :close-on-click-modal="false"
            :model-value="api.createState.visible"
            :title="api.createState.title"
            destroy-on-close
            width="600"
            @close="api.onCloseCreate()"
    >
        <el-form
                ref="formRef"
                :model="api.createState.form"
                :rules="rules"
                label-width="120px"
                status-icon
        >

            <el-form-item
                    label="角色名称"
                    prop="name"
            >
                <el-input
                        v-model="api.createState.form.name"
                        clearable
                        placeholder="角色名称"
                />
            </el-form-item>

            <el-form-item
                    label="数据类型"
                    prop="roleType"
            >
                <i-attach-select
                        v-model="api.createState.form.roleType"
                        :params="{target:'ROLE_TYPE'}"
                        class="fill-width"/>
            </el-form-item>

            <el-form-item class="mb-0">
                <el-button type="primary" @click="onSubmit">创建</el-button>
                <el-button @click="api.onCloseCreate()">关闭</el-button>
            </el-form-item>

        </el-form>
    </el-dialog>

</template>

<script lang="ts" setup>
import {reactive, ref} from "vue";
import {FormRules} from "element-plus";
import {RoleApi} from "~/api/system/role/role.api";

interface Props {
    api: RoleApi;
}

const {api} = withDefaults(defineProps<Props>(), {});
const formRef = ref();
const rules = reactive<FormRules>({
    name: [{required: true, message: "请输入公司名称", trigger: "blur"}],
    roleType: [{required: true, message: "请角选择角色类型", trigger: "blur"}],
    userType: [{required: true, message: "请角选择用户类型", trigger: "blur"}],
});

async function onSubmit() {
    const values = await formRef.value.validate();
    if (values) {
        api.submit(api.createState.form).then((res: any) => {
            if (res.ok) {
                api.onCloseCreate();
            }
        });
    }
}

</script>

<style lang="scss" scoped>

</style>
